<template>
	<view class="edit">
		<view class="title" v-if="handleItem">
			<p>{{ lookDoneItem ? '已完成' : '已过期' }}</p>
		</view>
		<view class="show-Modify-button" v-if="showButtons">
			<button type="primary" size="mini" @touchstart="showModify">修改</button>
		</view>
		<view class="content-container">
			<p class="content-text">内容</p>
			<!-- <view class="content">{{detail.content}}</view> -->
		</view>
		<textarea
			v-if="detail"
			v-model="detail.content"
			placeholder="请输入内容..."
			class="text-area"
			placeholder-class="textarea-placeholder"
			maxlength="500"
			:disabled="disabled"
		/>
		<view class="Modify-buttons" v-if="!disabled" @touchstart="handleModify">
			<button type="primary" class="confirm" data-text="确定">确定</button>
			<button data-text="取消">取消</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	onLoad(options) {
		if (this.lookDoneItem || this.fromPage === 'doneList') {
			this.detail = this.doneList.find(function(item) {
				return item.id === options.id;
			});
		} else if (this.lookExpiredItem || this.fromPage === 'overdue') {
			this.detail = this.expiredList['expiredTasks'].find(function(item) {
				return item.id === options.id;
			});
		} else {
			this.detail = this.list.find(function(item) {
				return item.id === options.id;
			});
		}
	},
	onReady() {
		if (this.fromPage === 'doneList') {
			uni.setNavigationBarTitle({
				title: '已完成任务'
			});
		} else if (this.fromPage === 'overdue') {
			uni.setNavigationBarTitle({
				title: '已过期任务'
			});
		} else {
			uni.setNavigationBarTitle({
				title: '重新编辑'
			});
		}
	},
	mounted() {},
	onUnload() {},
	onShow() {},
	data() {
		return {
			detail: '',
			title: '已完成'
		};
	},
	computed: {
		...mapState([
			'list',
			'showButtons',
			'disabled',
			'lookDoneItem',
			'doneList',
			'lookExpiredItem',
			'expiredList',
			'fromPage'
		]),
		//返回lookDoneItem或者lookExpiredItem
		handleItem() {
			if (this.lookDoneItem) {
				return this.lookDoneItem;
			} else {
				return this.lookExpiredItem;
			}
		}
	},
	methods: {
		...mapMutations(['ModifyStatus', 'ModifyContent']),
		showModify() {
			this.ModifyStatus({ showButtons: true, disabled: false });
		},

		handleModify(e) {
			if (e.target.dataset.text === '确定') {
				uni.showModal({
					title: '提醒',
					content: '确定要修改这项安排的内容吗',
					success: res => {
						if (res.confirm) {
							this.ModifyContent(this.detail);
							this.ModifyStatus({ showButtons: true, disabled: true, lookDoneItem: false, lookExpiredItem: false });
						} else {
							return;
						}
					}
				});
			} else {
				this.ModifyStatus({ showButtons: true, disabled: true, lookDoneItem: false, lookExpiredItem: false });
			}
		}
	},
	watch: {
		// fromPage:{
		// 	handler(newfrom,oldfrom){
		// 	if(newfrom==='overdue'){
		// 		uni.setNavigationBarTitle({
		// 			title:'已过期任务'
		// 		})
		// 	}else if(newfrom==='doneList'){
		// 		uni.setNavigationBarTitle({
		// 			title:'已完成任务'
		// 		})
		// 	}else{
		// 		uni.setNavigationBarTitle({
		// 			title:'重新编辑'
		// 		})
		// 	}
		// },
		// immediate:true
		// }
	}
};
</script>

<style lang="less" scoped>
.edit {
	padding: 20rpx;
	box-sizing: border-box;
	.title {
		margin: 0 auto;
		text-align: center;
		width: 300rpx;
		background-color: #ffffff;
		box-shadow: 0 0 5rpx 5rpx #888;
		border-radius: 20rpx;
		color: #999;
		font-size: 40rpx;
		p {
			letter-spacing: 4rpx;
		}
	}
	.show-Modify-button {
		.button {
			height: 80rpx;
			line-height: 80rpx;
		}
	}
	.content-container {
		color: #555;
		.content-text {
			color: black;
			font-weight: bold;
			font-size: 40rpx;
			margin-top: 30rpx;
		}
	}
	.text-area {
		width: 100%;
		margin-top: 20rpx;
		padding-left: 10rpx;
		border: 1rpx solid #c8c7cc;
		border-radius: 10rpx;
		box-sizing: border-box;
		height: 700rpx;
		font-size: 40rpx;
		color: #555;
	}
	.textarea-placeholder {
		font-size: 35rpx;
	}
	.Modify-buttons {
		.confirm {
			margin: 20rpx 0;
		}
	}
}
</style>
